<template>
    <div>
        <h3 class="text-box">
            自定义的test 模板结构
            <span>less语法</span>
        </h3>
        <p>{{username}}</p>
        <button @click="changename">修改用户名</button> <br><br>
        <input type="text" v-model="passwd">
    </div>
</template>

<script>
// 导入需要的组件
export default ({
    // vue 组件里面的 data 不能向之前一样 指向对象
    // 组件里面的 data 必须是一个函数
    
    data(){
        // 这个 return 出去的{} 可以定义数据
        return {
            username: "张三",
            passwd: 123
        }
    },
    methods:{
        changename(){
            this.username = '李四'
            console.log(this)
        }
    },
    watch:{
        passwd(newVal,oldVal){
            console.log(newVal)
            console.log(oldVal)
        }
    },
    // 过滤器
    filters:{

    }
})
</script>

// 将 css 语法 改为 less 语法
<style  lang="less">
.text-box {
    color: purple;
    span{
        color: red;
    }
}
</style>

